<template>
	<xn-form-container
		:title="educationData.length > 0 ? '教育经历详情' : '暂无教育经历'"
		:width="700"
		:visible="visible"
		:destroy-on-close="true"
		@close="onClose"
	>
		<div v-if="educationData.length > 0">
			<a-card
				v-for="(education, index) in educationData"
				:key="index"
				:title="getDegreeLabel(education.degree)"
				style="margin-bottom: 16px"
			>
				<a-descriptions :column="1" bordered>
					<a-descriptions-item label="学校名称">
						{{ education.school || '未填写' }}
					</a-descriptions-item>
					<a-descriptions-item label="专业">
						{{ education.major || '未填写' }}
					</a-descriptions-item>
					<a-descriptions-item label="学习时间">
						{{ formatEducationPeriod(education.startDate, education.endDate) }}
					</a-descriptions-item>
					<a-descriptions-item label="是否全日制">
						{{ education.isFullTime ? '是' : '否' }}
					</a-descriptions-item>
				</a-descriptions>
			</a-card>
		</div>
		<a-empty v-else description="暂无教育经历信息" />

		<!-- 学历证书图片展示 -->
		<div v-if="educationImages.length > 0" style="margin-top: 20px">
			<h3>学历证书</h3>
			<div class="thumbnails-container">
				<div
					v-for="(image, index) in educationImages"
					:key="index"
					class="thumbnail-item"
					@click="showImagePreview(jdOssBaseUrl + image)"
				>
					<a-image :src="jdOssBaseUrl + image" :width="100" :height="100" :preview="false" />
				</div>
			</div>
		</div>

		<template #footer>
			<a-button class="xn-mr8" @click="onClose">关闭</a-button>
		</template>
	</xn-form-container>

	<!-- 图片预览模态框 -->
	<a-modal v-model:open="previewVisible" title="证书预览" :footer="null" @cancel="handlePreviewCancel" width="800px">
		<div class="image-preview-container">
			<div class="image-wrapper">
				<img v-if="previewImageUrl" :src="previewImageUrl" alt="证书预览" class="preview-image" />
				<div v-else class="image-loading">图片加载中...</div>
			</div>
		</div>
	</a-modal>
</template>

<script setup>
	import { message } from 'ant-design-vue'
	import dayjs from 'dayjs'

	// 默认是关闭状态
	const visible = ref(false)
	const emit = defineEmits({ successful: null })

	// 教育经历数据
	const educationData = ref([])
	// 学历证书图片
	const educationImages = ref([])
	// 图片预览相关
	const previewVisible = ref(false)
	const previewImageUrl = ref('')
	const jdOssBaseUrl = 'https://s3.cn-north-1.jdcloud-oss.com/'

	// 学历映射
	const degreeMap = {
		PRIMARY: '小学',
		JUNIOR: '初中',
		SENIOR: '高中',
		JUNIOR_COLLEGE: '大专',
		BACHELOR: '本科',
		MASTER: '硕士',
		DOCTOR: '博士'
	}

	// 获取学历标签
	const getDegreeLabel = (degreeValue) => {
		return degreeMap[degreeValue] || degreeValue || '未填写'
	}

	// 格式化教育时间
	const formatEducationPeriod = (startDate, endDate) => {
		if (!startDate && !endDate) return '未填写'
		const start = startDate ? dayjs(startDate).format('YYYY-MM') : '未填写'
		const end = endDate ? dayjs(endDate).format('YYYY-MM') : '至今'
		return `${start} 至 ${end}`
	}

	// 显示图片预览
	const showImagePreview = (imageUrl) => {
		previewImageUrl.value = imageUrl
		previewVisible.value = true
	}

	// 关闭图片预览
	const handlePreviewCancel = () => {
		previewVisible.value = false
		previewImageUrl.value = ''
	}

	// 打开抽屉
	const onOpen = (record) => {
		visible.value = true
		if (record) {
			try {
				// 解析教育经历JSON字符串
				if (record.educationHistory) {
					const educationDataParsed =
						typeof record.educationHistory === 'string' ? JSON.parse(record.educationHistory) : record.educationHistory

					educationData.value = Array.isArray(educationDataParsed) ? educationDataParsed : []
				} else {
					educationData.value = []
				}

				// 处理学历证书图片
				if (record.diplomaImage) {
					educationImages.value = record.diplomaImage.split(',').filter((item) => item.trim() !== '')
				} else {
					educationImages.value = []
				}
			} catch (e) {
				console.error('解析教育经历数据失败:', e)
				educationData.value = []
				educationImages.value = []
				message.error('教育经历数据解析失败')
			}
		} else {
			educationData.value = []
			educationImages.value = []
		}
	}

	// 关闭抽屉
	const onClose = () => {
		educationData.value = []
		educationImages.value = []
		previewVisible.value = false
		previewImageUrl.value = ''
		visible.value = false
	}

	// 调用这个函数将子组件的一些数据和方法暴露出去
	defineExpose({
		onOpen
	})
</script>

<style scoped>
	.thumbnails-container {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-top: 10px;
	}

	.thumbnail-item {
		cursor: pointer;
		border: 1px solid #ddd;
		border-radius: 4px;
		overflow: hidden;
	}

	.image-preview-container {
		text-align: center;
	}

	.image-wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		min-height: 400px;
	}

	.preview-image {
		max-width: 100%;
		max-height: 70vh;
		object-fit: contain;
	}

	.image-loading {
		font-size: 16px;
		color: #999;
	}
</style>
